<!DOCTYPE HTML>
<script src='../../../resources/gesture-util.js'></script>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
  ::-webkit-scrollbar {
    display: none;
  }
  body {
    margin: 0px;
    height: 100px;
    width: 100px;
  }
  #parentDiv {
    background-color: #FF7F7F;
    height: 60px;
    width: 60px;
    overflow: scroll;
  }
  #content1 {
    height: 70px;
    width: 70px;
  }
  #childDiv {
    background-color: #84BE6A;
    height: 50px;
    width: 50px;
    overflow: scroll;
  }
  #content2 {
    height: 60px;
    width: 60px;
  }
</style>

<div id="parentDiv">
  <div id="content1">
    <div id="childDiv">
      <div id="content2">
      </div>
    </div>
  </div>
</div>

<script>
const WHEEL_SOURCE_TYPE = GestureSourceType.MOUSE_INPUT;

const parentDiv = document.getElementById('parentDiv');
const childDiv = document.getElementById('childDiv');
const rect = childDiv.getBoundingClientRect();
const startX = (rect.left + rect.right) / 2;
const startY = (rect.top + rect.bottom) / 2;

promise_test(async () => {
  await smoothScroll(
    500, startX, startY, WHEEL_SOURCE_TYPE, 'down', SPEED_INSTANT
  );
  await waitForAnimationEndTimeBased(() => {
    return childDiv.scrollTop;
  });
  await waitForAnimationEndTimeBased(() => {
    return parentDiv.scrollTop;
  });
  assert_equals(childDiv.scrollTop, 10, "childDiv must be fully scrolled");
  assert_equals(parentDiv.scrollTop, 0, "parentDiv shouldn't scroll at all");
}, 'With wheel scroll latching enabled only child div must scroll');
</script>
